<template>
	<view class="content">
		<image class="beijing" src="@/static/mipmap-hdpi/beijing3.jpg" />
		<view class="content01">
			<view class="box1">
				<image src="@/static/mipmap-hdpi/logo.png" />
				<text> 欢迎来到人才评测系统</text>
			</view>
			<view class="box2">
				<view class="box2_01">
					<view class="box2_01">
						<uni-easyinput :inputBorder="false" :required="true" @blur="validateInput"
							styles=" border-radius: 88rpx 88rpx 88rpx 88rpx;  " trim="all" prefixIcon="person"
							v-model="loginForm.username" placeholder="请输入账号"></uni-easyinput>
					</view>
				</view>

				<view class="box2_01">
					<view class="box2_01">
						<uni-easyinput :inputBorder="false" styles="border-radius: 88rpx 88rpx 88rpx 88rpx;"
							@blur="validateInput01" type="password" prefixIcon="locked" v-model="loginForm.password"
							placeholder="请输入密码"></uni-easyinput>
					</view>
				</view>

				<view class="box2_02">
					<view class="box2_02_01">
						<view style="width: 50rpx; height: 50rpx;">
							<image src="@/static/mipmap-hdpi/insurance.jpg"
								style=" width: 50rpx; height: 50rpx; margin-left: 10rpx;  background-size: cover;">
							</image>
						</view>
						<view>
							<uni-easyinput styles="border-radius: 88rpx 88rpx 88rpx 88rpx;" trim="all"
								@blur="validateInput02" v-model="loginForm.code" :inputBorder="false"
								prefixIcon="CustomFont" placeholder="请输入验证码"></uni-easyinput>
						</view>

					</view>
					<image :src="codeUrl" style="width:230rpx; height: auto; margin-left: 30rpx;" @click="yanzheng">
					</image>
				</view>
				<view class="jizumima">
					<view>
						<label>
							<checkbox :checked="checked01" @click="checked01a">记住密码</checkbox>
						</label>
					</view>
				</view>
				<view>
					<button class="box2_01" style="background: #0C5FFA;" @click="pwdLogin">登录</button>
				</view>

				<view>
					<text>登录即代表同意</text>
					<text class="navigator" @click="handleUserAgrement()">《用户协议》</text>
					<text class="navigator" @click="handlePrivacy()">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getCodeImg,
		login,
		getInfo,
		userxx
	} from "@/api/login.js"
	import {
		useInfoStore
	} from '@/store/user.js'
	import {
		UserDetails
	} from "@/store/UserDetails.js"
	//定义传值属性
	const loginForm = ref({
		username: '',
		password: '',
		code: '',
		uuid: ''
	})
	//记住密码
	const checked01 = ref(false);
	const checked01a = () => {
		if (checked01.value) {
			checked01.value = false;
		} else {
			checked01.value = true;
		}
	}
	//校验
	const errorMessage = ref({
		username: '',
		password: '',
		code: ''
	});

	//全部校验一次
	const isAllPropertiesEmpty = () => {
		validateInput();
		validateInput01();
		validateInput02();
		return (
			errorMessage.value.username === '' &&
			errorMessage.value.password === '' &&
			errorMessage.value.code === ''
		);
	};


	// 定义验证输入的方法
	const validateInput = () => {
		if (!loginForm.value.username.trim()) {
			errorMessage.value.username = '账号不能为空';
			uni.showToast({
				title: "账号不能为空",
				duration: 2000,
				icon: "error"
			});
		} else {
			errorMessage.value.username = '';
		}
	};
	const validateInput01 = () => {
		if (!loginForm.value.password.trim()) {
			errorMessage.value.password = '密码不能为空';
			uni.showToast({
				title: "密码不能为空",
				duration: 2000,
				icon: "error"
			});
		} else {
			errorMessage.value.password = '';
		}
	};
	const validateInput02 = () => {
		if (!loginForm.value.code.trim()) {
			errorMessage.value.code = '验证码不能为空';
			uni.showToast({
				title: "验证码不能为空",
				duration: 2000,
				icon: "error"
			});
		} else {
			errorMessage.value.code = '';
		}
	};


	//验证码图片地址
	const codeUrl = ref('');
	//点击隐私协议的事件
	const handlePrivacy = () => {
		wx.navigateTo({
			url: '/pages/agreement/yingsi/yingsi'
		})

	};

	//点击用户协议的事件
	const handleUserAgrement = () => {
		wx.navigateTo({
			url: '/pages/agreement/yonghu/yonghu'
		})
	};
	//获取验证码图片
	const yanzheng = async () => {
		try {
			let data = await getCodeImg();
			if (data && data.img && data.uuid) {
				codeUrl.value = 'data:image/gif;base64,' + data.img;
				loginForm.value.uuid = data.uuid;
				// console.log('验证码获取成功');
			} else {
				uni.showToast({
					title: "请重新获取",
					duration: 2000,
					icon: "error"
				});
			}
		} catch (error) {
			console.error('获取验证码图像时出错:', error);
			// 可以在这里添加更多的错误处理逻辑，例如显示错误提示给用户
			uni.showToast({
				title: "获取验证码出错",
				duration: 2000,
				icon: "error"
			});
		}
	}
	onMounted(() => {
		getmima();
		yanzheng();
	})
	// 解密保存的密码的方法
	const decryptPassword = () => {
		// 从本地存储中获取加密后的密码
		wx.getStorage({
			key: "password",
			encrypt: true,
			success(res) {
				loginForm.value.password = res.data
			}
		})
	};
	//记住密码方法
	const mima = async () => {
		if (checked01.value) {
			console.log("记住密码")
			wx.setStorage({
				key: "username",
				data: loginForm.value.username
			})
			wx.setStorage({
				key: "password",
				data: loginForm.value.password,
				encrypt: true,
			})
			// conswxole.log(uni.getStorageSync('password'));
			// console.log(decryptPassword());
		} else {
			wx.removeStorageSync('username');
			wx.removeStorageSync('password');
			console.log("忘记密码")
		}
	}
	//获取记住密码的数据
	const getmima = async () => {
		let username = await wx.getStorageSync('username')
		if (username) {
			decryptPassword()
			loginForm.value.username = username
			checked01.value = true;
		} else {
			checked01.value = false;
		}
	}
	//登录事件
	const pwdLogin = async () => {

		if (isAllPropertiesEmpty()) {
			uni.showToast({
				title: '登录中',
				duration: 2000,
				icon: "loading"
			});
			let data = await login(loginForm.value);
			if (data.code == 500) {
				uni.showToast({
					title: data.msg,
					duration: 2000,
					icon: "none"
				});
				yanzheng();
			} else {
				useInfoStore().setUserInfo(data)
				uni.showToast({
					title: "登录成功",
					duration: 2000,
					icon: "success"
				});
				mima();
				uni.switchTab({
					url: '/pages/shouye/shouye'
				});
				userxx01();
			}
		} else {
			uni.showToast({
				title: '校验失败',
				duration: 1000,
				icon: "error"
			});

		}

	}
	//获取登录人信息
	const userxx01 = async () => {
		let data = await getInfo()
		userxx02(data.user.userId)
	}
	const userxx02 = async (userId) => {
		let data = await userxx(userId)
		UserDetails().setUserInfo(data)
	}
</script>


<style lang="scss">
	//主盒子
	.content {
		width: 100vw;
		height: 100vh;
		// 弹性布局
		display: flex;
		flex-direction: column;
		justify-content: center;

		.beijing {
			position: absolute;
			z-index: - 1;
			background-size: cover;
			/* 可以设置图片的其他样式，如宽度、高度等 */
			width: 100vw;
			height: 100vh;
			// border: 2px solid blue;
		}

		//内容盒子
		.content01 {
			height: 72%;

			// border: 2px solid blue;
			//标题盒子
			.box1 {
				height: 30%;
				// border: 2px solid blue;
				display: flex;
				flex-direction: column;
				align-items: center;

				// border: 2px solid blue;
				image {
					/* 设置图片宽度为300像素 */
					width: 214rpx;
					/* 设置图片高度为200像素 */
					height: 214rpx;
				}

				text {
					width: 400rpx;
					height: 40rpx;
					font-family: Noto Sans S Chinese, Noto Sans S Chinese;
					font-weight: bold;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;

				}
			}

			.box2 {
				margin-top: 28rpx;
				width: 100%;
				height: 68%;
				// border: 2px solid blue;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.box2_01 {
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 622rpx;
					height: 118rpx;
					background: #F4F7FD;
					border-radius: 88rpx 88rpx 88rpx 88rpx;
					padding-left: 20rpx;

					input {
						// border: 2px solid blue;

						font-family: Noto Sans S Chinese, Noto Sans S Chinese;
						font-weight: 400;
						font-size: 32rpx;
						color: #7F7F7F;
						line-height: 44rpx;
						font-style: normal;
						text-transform: none;
					}
				}

				button {
					display: flex;
					justify-content: center;
					/* 使文字在水平方向居中 */
					align-items: center;
					/* 使文字在垂直方向居中 */
					width: 80rpx;
					height: 40rpx;
					font-family: Noto Sans S Chinese, Noto Sans S Chinese;
					font-weight: 400;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}

				.box2_02 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 622rpx;
					// border: 2px solid blue;

					.box2_02_01 {
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 60%;
						height: 118rpx;
						background: #F4F7FD;
						border-radius: 88rpx 88rpx 88rpx 88rpx;
						padding-left: 25rpx;

						input {
							font-family: Noto Sans S Chinese, Noto Sans S Chinese;
							font-weight: 400;
							font-size: 32rpx;
							color: #7F7F7F;
							line-height: 44rpx;
							font-style: normal;
							text-transform: none;
						}
					}
				}

				.jizumima {
					width: 550rpx;
					display: flex;
					flex-direction: row;
					justify-content: flex_end;
				}

				/* 设置超链接的默认样式 */
				.navigator {
					color: #007BFF;
					/* 设置文本颜色为蓝色，可根据喜好调整 */
					text-decoration: none;
					/* 去除下划线，可根据需求保留或修改 */
					font-size: 16px;
					/* 设置字体大小，可按需更改 */
					cursor: pointer;

					/* 设置鼠标指针样式为手型，表示可点击 */
					/* 设置超链接点击后的样式 */
					.navigator:active {
						color: #0056b3;
						/* 改变点击时的文本颜色，可根据喜好调整 */
						opacity: 0.8;
						/* 降低点击时的透明度，可根据需求调整 */
					}
				}
			}
		}
	}
</style>